<template>
	<view>
		<view class="page_title">
			<view class="page_name">心动</view>
		</view>
		<scroll-view scroll-y class="scroll" :refresher-enabled="true" :refresher-triggered="isTrigger"
			@refresherrefresh="handleRefresh" refresher-background='tranparent'>
			<view class="heartList banxin">
				<view class="service" v-for="item in heartList" :key="item.id" @click="handleDetail(item.id)">
					<image :src="item.avatar" mode="" />
					<view class="content">
						<view class="service_title">
							<view class="name">{{item.name}} </view>
							<image v-if="item.sex==0" src="/static/img/woman.png" mode="" />
							<image v-else src="/static/img/man.png" mode="" />
						</view>
						<text>{{item.age}}岁 {{item.height}}cm {{item.education}}</text>
					</view>
					<view class="islike">
						<image @click.stop="handleLike(item.id)" src="/static/img/like.png" mode="" />
					</view>
					<view class="open">
						<image src="/static/img/open.png" mode="" />
					</view>
				</view>
			</view>
		</scroll-view>

		<tab-bar activeWay='heart'></tab-bar>

		<u-popup :show="showPopup" mode='center' @close="handleClose">
			<view class="my-popup">
				<view class="back" @click="handleClose">
					<image src="/static/img/back.png" mode="" />
				</view>
				<view class="icon">
					<image src="/static/img/tip.png" mode="" />
				</view>
				<view class="title">取消心动</view>
				<view class="tip">您确定要取消对Ta的心动吗</view>
				<view class="btn">
					<button class="confirm" type="primary" @click="handleConfirm">确定取消</button>
					<button type="primary" @click="handleClose">再考虑一下</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import TabBar from '@/components/TabBar.vue'

	export default {
		components: {
			TabBar
		},
		data() {
			return {
				heartList: [],
				showPopup: false,
				currentId: '',
				isTrigger: false,
				_freshing: false
			};
		},
		onShow() {
			this.initHeartList()
		},
		methods: {
			initHeartList() {
				request(`/heartBeat/list`).then((res) => {
					console.log(res.data.data, 'myBridge');
					this.heartList = res.data.data
					this.isTrigger = false
					this._freshing = false
				})
			},
			handleRefresh() {
				if (this._freshing) return
				this._freshing = true
				this.isTrigger = true;
				this.initHeartList()
			},
			handleDetail(id) {
				console.log(id, 'handleDetail');
				uni.navigateTo({
					url: `/pages/linkPage/userDetail/userDetail?id=${id}`
				})
			},
			handleClose() {
				this.showPopup = false
			},
			handleConfirm() {
				request(`/heartBeat/delete?id=${this.currentId}`, {}).then((res) => {
					console.log(res.data, 'res');
					this.initHeartList()
					this.handleClose()
					uni.showToast({
						title: '取消成功',
						icon: 'none',
						duration: 2000
					})
				})
			},
			handleLike(id) {
				console.log(id, 'handleLike');
				this.showPopup = true
				this.currentId = id
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(249, 249, 249, 1);
	}

	.page_title {
		height: 300rpx;
	}

	.service {
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 60rpx;
		background-color: rgba(255, 255, 255, 1);
		;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 40rpx;
			border-radius: 50%;
		}

		.content {
			flex: 1;
			// height: 76rpx;
			color: rgba(102, 102, 102, 1);
			line-height: 28rpx;
			text{
				font-size: 20rpx;
			}
			.service_title {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				margin-bottom: 20rpx;

				.name {
					max-width: 150rpx;
					margin-right: 10rpx;
					white-space: nowrap;
					/* 确保文本在一行内显示 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 0 10rpx;
				}
			}
		}

		.islike {
			width: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 20rpx;
			color: rgba(166, 166, 166, 1);

			image {
				display: block;
				width: 60rpx;
				height: 60rpx;
				margin: auto;
			}

			.heartbeat {
				margin-top: 10rpx;
			}
		}

		.open {
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

.u-popup /deep/ .u-popup__content{
  width: 600rpx;
  box-sizing: border-box;
  height: 500rpx;
  border-radius: 40rpx;
  padding:  50rpx;
  .back{
    width: 65rpx;
    height: 65rpx;
    border-radius: 20rpx;
    background-color: #EBEBFF;
    display: flex;
    align-items: center;
    justify-content: center;
    image{
      width: 40rpx;
      height: 40rpx;
    }
  }
  .icon{
    image{
      margin: 0 auto;
      margin-top: -30rpx;
      display: block;
      width: 120rpx;
      height: 120rpx;
    }
  }
  .title{
    font-size: 18px;
    font-weight: 500;
    line-height: 52rpx;
    margin: 20rpx 0;
    color: rgba(51, 51, 51, 1);;
    text-align: center;
  }
  .tip{
    font-size: 12px;
    line-height: 40rpx;
    color: rgba(102, 102, 102, 1);
    text-align: center;
  }
  .btn{
    position: absolute;
    width: 85%;
    display: flex;
    bottom: 30rpx;
    button{
      width: 45%;
    }
    .confirm{
      color: rgba(156, 156, 255, 1);
      background-color: rgba(235, 235, 255, 1) !important;
    }
  }
}
</style>